<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>RaspCTL</title>
    <script src="/static/js/jquery-1.8.3.js"></script>
    <script src="/static/js/jquery.json-2.4.js"></script>
</head>
<body>

<span id="toolbar">
    <button id="prev">上一首</button>
    <button id="rewind">快退</button>
    <button id="play">播放</button>
    <button id="stop">停止</button>
    <button id="forward">快进</button>
    <button id="next">下一首</button>
    <span id="mode">
        <input type="radio" id="seq" name="mode" checked="true"/><label for="seq">顺序</label>
        <input type="radio" id="loop" name="mode"/><label for="loop">循环</label>
    </span>
    
    <button id="addplaylist">添加</button>
    <button id="emptyplaylist">清空</button>
</span>

<table id="playlist"> 
</table>

<script type="text/javascript">
    player = {}; //global var

    function call_player(data, func) {
        $.get('/api', {data:$.toJSON(data)}, function(data, status) {
            if(data && data.status == 'Success') {
                player = data.result;
                if(func) { func(); }
            } else {
                alert("ERROR");
            }
        });
    }
    
    $(document).ready(function() {
        data = {name:"Player.get_info"};
        call_player(data, function() {
            toolbar();
            playlist();
        });
    });

    function toolbar() {
        if(player.state == 0) {
            $("#play").html("播放");
            $("#prev").attr("disabled", true);
            $("#rewind").attr("disabled", true);
            $("#stop").attr("disabled", true);
            $("#forward").attr("disabled", true);
            $("#next").attr("disabled", true);
        }
        if(player.state == 1) {
            $("#play").html("暂停");
            $("#prev").attr("disabled", false);
            $("#rewind").attr("disabled", false);
            $("#stop").attr("disabled", false);
            $("#forward").attr("disabled", false);
            $("#next").attr("disabled", false);
        }
        if(player.state == 2) {
            $("#play").html("播放");
            $("#prev").attr("disabled", true);
            $("#rewind").attr("disabled", true);
            $("#stop").attr("disabled", false);
            $("#forward").attr("disabled", true);
            $("#next").attr("disabled", true);
        }

        if(player.loop) {
            $("#loop").attr("checked", true);
            $("#loop").attr("disabled", true);
            $("#seq").attr("disabled", false);
        } else {
            $("#seq").attr("checked", true);
            $("#seq").attr("disabled", true);
            $("#loop").attr("disabled", false);
        }
    }

    function playlist() {
        tr = "<tr><td></td><td><button>播放</button><button>删除</button><button>向上</button><button>向下</button></td></tr>"
        $("#playlist").empty();
        for (i in player.playlist) {
            $("#playlist").append(tr);
            $("#playlist tr:last td:first").html(player.playlist[i][1]);
            buttons = $("#playlist tr:last td:last button");
            buttons.each(function(){
                $(this).val(i.toString());
            });
            buttons.eq(0).click(function(e){
                data = {name:"Player.play", args:[$(this).val()]};
                call_player(data, function() {
                    toolbar();
                });
            });
            buttons.eq(1).click(function(e){
                data = {name:"Player.del_playitem", args:[$(this).val()]};
                call_player(data, function() {
                    playlist();
                });
            });
            buttons.eq(2).click(function(e){
                data = {name:"Player.sort_playitem", args:[$(this).val(), "False"]};
                call_player(data, function() {
                    playlist();
                });
            });
            buttons.eq(3).click(function(e){
                data = {name:"Player.sort_playitem", args:[$(this).val(), "True"]};
                call_player(data, function() {
                    playlist();
                });
            });
        }
    }

    $("#play").click(function(e) {
        if(player.state == 0) {
            data = {name:"Player.play"};
        } else if (player.state == 1) {
            data = {name:"Player.pause"};
        } else {
            data = {name:"Player.resume"};
        }
        call_player(data, function(){
            toolbar();    
        });
    });
    $("#stop").click(function(e) {
        data = {name:"Player.stop"};
        call_player(data, function() {
            toolbar();
        });
    });
    $("#prev").click(function(e) {
        data = {name:"Player.prev"};
        call_player(data, function() {
            toolbar();
        });
    });
    $("#next").click(function(e) {
        data = {name:"Player.next"};
        call_player(data, function() {
            toolbar();
        });
    });
    $("#rewind").click(function(e) {
        data = {name:"Player.lseek"}
        call_player(data);
    });
    $("#forward").click(function(e) {
        data = {name:"Player.rseek"}
        call_player(data);
    });
    $("input[name='mode']").click(function(e) {
        if(e.target.id == "loop") {
            data = {name:"Player.set_loop", args:["True"]};
        } else {
            data = {name:"Player.set_loop", args:["False"]};
        }
        call_player(data, function(){
            toolbar(); 
        });
    });
    $("#addplaylist").click(function(e) {
        location.href = '/file';
    });
    $("#emptyplaylist").click(function(e) {
        data = {name:"Player.set_playlist", args:["",""]};
        call_player(data, function(){
            playlist();
        }); 
        call_player({name:"Player.get_info", args:[]}, function() {
            toolbar();
        });
    });
</script>

</body>
</html>
